<template>
  <div>
    <div class="wrap">
      <CHeader content="企业三卡管理" ref="head"></CHeader>
    </div>

    <div class="box">
      <el-radio-group v-model="filter.address">
        <el-radio-button
          v-for="(item, index) in regionArray"
          :key="index"
          :label="item.label"
          >{{ item.name }}</el-radio-button
        >
      </el-radio-group>
    </div>

    <el-row class="card" type="flex">
      <el-col :span="6" class="promise">
        <img align="left" src="./../../../assets/images/menus/query/icon.png" />
        <div class="text">
          <span class="span1">承诺卡:</span>
          <span class="span2">{{ total.target }}</span>
        </div>
      </el-col>
      <el-col :span="6" class="promise">
        <img align="left" src="./../../../assets/images/menus/query/rush.png" />
        <div class="text">
          <span class="span1">应急卡:</span>
          <span class="span2">{{ total.complianceRate }}</span>
        </div>
      </el-col>
      <el-col :span="6" class="promise">
        <img align="left" src="./../../../assets/images/menus/query/tell.png" />
        <div class="text">
          <span class="span1">告知卡:</span>
          <span class="span2">{{ total.tellCard }}</span>
        </div>
      </el-col>
    </el-row>

    <el-main
      class="tp"
      style="position: relative; padding-bottom: 46px; margin-left: 2px"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabLists">
        <el-tab-pane label="承诺卡" name="first">
          <el-row
            class="cal"
            type="flex"
            style="
              padding: 0 16px;
              display: flex;
              justify-content: space-between;
            "
          >
            <el-col :span="6" class="e-s-10">
              <span>合计：</span>
              <span class="num">35</span>
            </el-col>

            <el-col :span="5" style="display: flex" class="c-s-4">
              <input
                type="text"
                class="input-search"
                placeholder="输入企业名称查询"
              />
              <el-button
                type="primary"
                icon="el-icon-search"
                circle
              ></el-button>
              <el-col class="bt-dc" :span="3" style="margin-left: 49px"
                >导出</el-col
              >
            </el-col>
          </el-row>
          <TableBox
            :cell-style="tableRowStyle"
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#E0EAF5',
              height: '32px !important',
            }"
            :header-row-style="{ height: '16px' }"
            :pageOption.sync="pageOption"
            @sizeChange="handleSizeChange"
            @currentChange="handleCurrentChange"
            :height="tabelHeight"
          >
            <el-table-column prop="num" label="序号" align="center" width="70">
            </el-table-column>
            <el-table-column prop="name" label="企业名称"> </el-table-column>
            <el-table-column prop="people" label="承诺人"> </el-table-column>
            <el-table-column prop="leader" label="主管领导"> </el-table-column>
            <el-table-column prop="position" label="岗位名称">
            </el-table-column>
            <el-table-column prop="attention" label="承诺事项">
            </el-table-column>
            <el-table-column prop="date" label="承诺日期"> </el-table-column>
            <el-table-column prop="detail" label="详情"> </el-table-column>
          </TableBox>
        </el-tab-pane>
        <el-tab-pane label="应急处置卡" name="second"> </el-tab-pane>
        <el-tab-pane label="岗位告知卡" name="third"></el-tab-pane>
      </el-tabs>

      <!-- <pagination2el
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
      /> -->
    </el-main>
  </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import Tabs from "@/components/Tabs/Tabs";
import TableBox from "@/components/tableBox/tableBox";
import * as browser from "@/utils/browser";
const { IEVersion, resizeObserver } = browser.default;
// import pagination2el from "@/components/pagination2el/pagination2el.vue";
export default {
  name: "qyfxypycngs",

  components: {
    CHeader,
    Tabs,

    TableBox,

    // pagination2el,
  },
  resizeMain: null,
  mounted() {
    this.init(true);
    if (IEVersion() == -1) {
      resizeObserver(
        this.$el,
        () => {
          this.setHeight();
        },
        this.resizeMain
      );
    }
  },
  data() {
    return {
      total: {
        target: 0,
        complianceRate: 0,
        tellCard: 0,
      },
      regionArray: [
        // 全市 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "全市", label: "" },
        { name: "盐化新区", label: "yhxq" },
        { name: "洪泽区", label: "hzq" },
        { name: "盱眙县", label: "xyx" },
        { name: "涟水县", label: "lsx" },
        { name: "金湖县", label: "jhx" },
        { name: "淮阴区", label: "hyq" },
        { name: "清江浦区", label: "qjpq" },
      ],
      activeName: "first",
      // 过滤器
      filter: {
        address: "",
        year: "2020",
      },
      tableData: [],
      tabelHeight: 0,
      pageOption: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "sizes, total, prev, pager, next, jumper",
      },
    };
  },

  methods: {
    tableRowStyle({ columnIndex }) {
      if (columnIndex === 7) {
        //第3列字体颜色是红色
        return "color:#4D7EE9;!important;text-decoration: underline;cursor:pointer";
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      this.pageOption.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageOption.currentPage = val;
      this.getData();
    },
    setHeight() {
      this.$el &&
        this.$nextTick(() => {
          let mainHeight =
              window.innerHeight -
              document.querySelector(".header-container").offsetHeight -
              12,
            header = this.$refs.head ? this.$refs.head.$el : null,
            boxs = this.$el.querySelectorAll(".box"),
            total = this.$el.querySelector(".tp"),
            isTop = this.$el.querySelector(".is-top"),
            card = this.$el.querySelector(".card"),
            tableTool = this.$el.querySelector(".cal"),
            paddingTop = 20,
            height = mainHeight - paddingTop;
          if (header) {
            height -= header.offsetHeight;
          }
          if (total) {
            height -= total.offsetHeight;
          }
          if (card) {
            height -= total.offsetHeight;
          }
          if (boxs) {
            boxs.forEach((item) => {
              height -= item.offsetHeight;
            });
          }
          if(isTop){
             height -= isTop.offsetHeight;
          }
          if (tableTool) {
            height -= tableTool.offsetHeight;
          }
          this.tabelHeight = height + "px";
          console.log(this.tabelHeight);
        });
    },
    getData(retry = false) {
      this.tableData = [];
      setTimeout(() => {
        for (let index = 0; index < this.pageOption.pageSize; index++) {
          this.tableData.push({
            num: "1",
            name: "江苏邦红科技有限公司",
            people: "周杰伦",
            leader: "王伟",
            position: "化工组长",
            attention: "化工组长岗位调整变更",
            date: "2020.6.30",
            detail: "查看",
          });
        }
        if (retry) {
          this.pageOption.total = parseInt(Math.random() * 1000);
        }
      }, 1000);
    },
    init() {
      console.log(this.pageOption, this.filter);
      setTimeout(() => {
        this.total = {
          target: parseInt(Math.random() * 1000),
          complianceRate: parseInt(Math.random() * 100),
          tellCard: parseInt(Math.random() * 100),
        };
        this.getData(true);
      }, 300);
    },
  },
  watch: {
    filter: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 70px;
  text-align: left;
  background-color: rgb(243, 245, 251);
}

.box {
  padding: 20px;
  max-width: calc(100% - 40px);
  :deep .el-radio-button {
    &.is-active .el-radio-button__inner {
      background-color: #5184ea;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        border-top: 5px solid #5184ea;
        border-left: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 5px solid transparent;
      }
    }
  }
  &.noAfter {
    :deep .el-radio-button.is-active .el-radio-button__inner::after {
      display: none;
    }
  }
}
.card {
  display: flex;
  width: 100%;
  height: 76px;
  background: #f5f8fd;
  .promise {
    display: flex;
    align-items: center;
    margin-left: 32px;
    width: 182px;
    height: 76px;
    line-height: 76px;

    .text {
      display: flex;
      align-items: center;
      width: 114px;
      height: 19px;
      line-height: 19px;
      margin-left: 12px;
      text-align: left;
      .span1 {
        //   width: 114px;
        // height: 19px;
        font-size: 18px;
        font-family: ArialMT;
        font-weight: Regular;
        color: #5d6c8e;
      }
      .span2 {
        font-size: 30px;
        font-family: Arial;
        font-weight: 400;
        color: #364064;
      }
    }
  }
}

.tp {
  background-color: rgb(243, 245, 251);
  .c-s-4 {
    .input-search {
      width: 279px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #e3e6ec;
      border-radius: 4px;
      line-height: 23px;
    }
    .img-bg {
      display: flex;

      width: 39px;
      height: 36px;
      background: #5184ea;
      border-radius: 0px 4px 4px 0px;
    }
    .bt-dc {
      float: right;
      text-align: center;
      width: 100px;
      height: 32px;
      color: #ffffff;
      background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
      box-shadow: 0px 2px 4px 0px rgb(81 133 235 / 50%);
      border-radius: 4px;
    }
  }
}
:deep.el-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
  margin-left: 33px;
}
:deep.el-input {
  width: 279px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #e3e6ec;
  border-radius: 4px;
}
:deep.el-col-24 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
:deep.el-button--primary {
  width: 82px;
  height: 36px;
  background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
  box-shadow: 0px 2px 4px 0px rgba(81, 133, 235, 0.5);
  border-radius: 4px;
  line-height: 1px;
}
:deep.el-pagination {
  padding: 2px 0;
  position: absolute;
  bottom: 0;
  /* left: 0; */
  width: 99%;
}
:deep .el-table__header-wrapper {
  height: 46px;
  line-height: 22px;
}
:deep(.el-pagination) {
  position: unset;
}

:deep(.el-pagination__sizes) {
  left: 17px !important;
}
:deep(.el-tabs__item.is-active) {
  color: #5287f2;
}

:deep(.el-table) {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  color: #606266;
  margin-top: 10px;
}
</style>